<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Basic Sliders</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Basic Sliders</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
    #demo input {
        width: 2em;
    }
    .horiz_slider {
        margin-left: 1ex;
    }
    .vert_slider {
        margin-bottom: 1em;
    }
</style>

<div class="intro">
    <p>This example walks you through the basics of creating a Slider from script.
    Both Sliders in this example link to text input fields that expect numeric input.  The first Slider uses the default configuration, spanning values between 0 and 100, and is rendered inline.</p>

    <p>The second Slider is configured to orient vertically (along the y axis) and the configuration includes minimum, maximium, and initial values.  It is rendered into a <code>&lt;&#x2F;div&gt;</code>.</p>

    <p>The first Slider is set up in a more traditional JavaScript coding style and
    the second using the shorter, method chaining style.</p>
</div>

<div class="example yui3-skin-sam">
    <div id="demo" class="yui3-skin-sam">

    <h4>Horizontal Slider</h4>
    <p>
        <label for="horiz_value">Value: </label>
            <input id="horiz_value" value="0">
        <span class="horiz_slider"></span>
    </p>

    <h4>Vertical Slider</h4>
    <p><label for="vert_value">Value: </label><input id="vert_value" value="30"></p>
    <div class="vert_slider"></div>

</div>
<script type="text/javascript">
// Create a YUI instance and request the slider module and its dependencies
YUI().use("slider", function (Y) {

var xInput,  // input tied to xSlider
    yInput,  // input tied to ySlider
    xSlider; // horizontal Slider

// Function to pass input value back to the Slider
function updateSlider( e ) {
    var data   = this.getData(),
        slider = data.slider,
        value  = parseInt( this.get( "value" ), 10 );

    if ( data.wait ) {
        data.wait.cancel();
    }

    // Update the Slider on a delay to allow time for typing
    data.wait = Y.later( 200, slider, function () {
        data.wait = null;
        this.set( "value", value );
    } );
}

// Function to update the input value from the Slider value
function updateInput( e ) {
    this.set( "value", e.newVal );
}
    


// Create a horizontal Slider using all defaults
xSlider = new Y.Slider();

// Link the input value to the Slider
xInput = Y.one( "#horiz_value" );
xInput.setData( { slider: xSlider } );

// Pass the input as the 'this' object inside updateInput
xSlider.after( "valueChange", updateInput, xInput );
xInput.on( "keyup", updateSlider );
    
// Render the Slider next to the input
xSlider.render('.horiz_slider')

    
// Create the vertical Slider.
yInput = Y.one( "#vert_value" );
yInput.setData( "slider", new Y.Slider({
            axis: 'y',
            min   : 100,      // min is the value at the top
            max   : -100,     // max is the value at the bottom
            value : 30,       // initial value
            length: '201px',  // rail extended to afford all values

            // construction-time event subscription
            after : {
                valueChange: Y.bind( updateInput, yInput )
            }
        }).render( ".vert_slider" ) // render returns the Slider
    )                               // set( "data", ... ) returns the Node
    .on( "keyup", updateSlider );   // chain the keyup subscription

});
</script>

</div>

<h3>Horizontal Slider with default configuration</h3>
<p>Sliders are horizontal by default, with available values ranging from 0 to 100, and an initial value of 0.  The rail is 150 pixels long plus a few pixels for the rail's end caps.</p>

<pre class="code prettyprint">var xSlider = new Y.Slider();

&#x2F;&#x2F; render into the &lt;span&gt; next to the input
xSlider.render( &quot;.horiz_slider&quot; );</pre>


<h3>Linking a Slider with a text input</h3>
<p>To keep the Slider's value and input value in sync, you need to subscribe to events on both the input and the Slider.  For Slider-to-input, the interesting event is <code>valueChange</code>.</p>

<pre class="code prettyprint">&#x2F;&#x2F; Function to update the input value from the Slider value
function updateInput( e ) {
    this.set( &quot;value&quot;, e.newVal );
}

var xInput = Y.one( &quot;#horiz_value&quot; );
&#x2F;&#x2F; Subscribe to the Slider&#x27;s valueChange event, passing the input as the &#x27;this&#x27;
xSlider.on( &quot;valueChange&quot;, updateInput, xInput );</pre>


<h3>Linking the input with the Slider</h3>
<p>To feed input changes back to the Slider we'll listen to its <code>keyup</code> event.  But we'll put the update on a delay to allow for a user to finish typing.</p>

<p>Additionally, we'll make the update function generic, since we have two Sliders in this example.  We'll leverage the <code>setData</code> and <code>getData</code> methods of Node instances and store a reference to the Slider.  Then we can use this object from inside the function to get back to the slider the input is related to.</p>

<pre class="code prettyprint">&#x2F;&#x2F; Function to pass input value back to the Slider
function updateSlider( e ) {
    var data   = this.getData(),
        slider = data.slider,
        value  = parseInt( this.get( &quot;value&quot; ), 10 );

    if ( data.wait ) {
        data.wait.cancel();
    }

    &#x2F;&#x2F; Update the Slider on a delay to allow time for typing
    data.wait = Y.later( 200, slider, function () {
        data.wait = null;
        this.set( &quot;value&quot;, value );
    } );
}

xInput.setData( { slider: xSlider } );
xInput.on( &quot;keyup&quot;, updateSlider );</pre>


<h3>Creating the vertical Slider</h3>
<p>To create a vertical Slider you just need to set the <code>axis</code> attribute to &quot;y&quot;.</p>

<p>For this Slider, we'll use more extensive method chaining and include value and rail configurations.  First we'll change the value range from 0 - 100 to -100 - +100 and set an initial value of +30.</p>

<p>Note that the <code>min</code> configuration is 100 in this case because the top is associated with the minimum value.  Slider has no qualms about <code>min</code> being greater than <code>max</code>.</p>

<p>The rail length is then configured to be 201 pixels, so each value has a distinct pixel position on the rail (don't forget 0).</p>

<p>Finally, the <code>valueChange</code> subscription is included in the configuration as well.</p>

<pre class="code prettyprint">var yInput = Y.one( &quot;#vert_value&quot; );
yInput.setData( &quot;slider&quot;, new Y.Slider({
            axis: &#x27;y&#x27;,
            min   : 100,      &#x2F;&#x2F; min is the value at the top
            max   : -100,     &#x2F;&#x2F; max is the value at the bottom
            value : 30,       &#x2F;&#x2F; initial value
            length: &#x27;201px&#x27;,  &#x2F;&#x2F; rail extended to afford all values

            &#x2F;&#x2F; construction-time event subscription
            after : {
                valueChange: Y.bind( updateInput, yInput )
            }
        }).render( &quot;.vert_slider&quot; ) &#x2F;&#x2F; render returns the Slider
    )                               &#x2F;&#x2F; set( &quot;data&quot;, ... ) returns the Node
    .on( &quot;keyup&quot;, updateSlider );   &#x2F;&#x2F; chain the keyup subscription</pre>


<h3>Full Code Listing</h3>
<pre class="code prettyprint">&#x2F;&#x2F; Create a YUI instance and request the slider module and its dependencies
YUI($yuiConfig).use($requiredModules, function (Y) {

var xInput,  &#x2F;&#x2F; input tied to xSlider
    yInput,  &#x2F;&#x2F; input tied to ySlider
    xSlider; &#x2F;&#x2F; horizontal Slider

&#x2F;&#x2F; Function to pass input value back to the Slider
function updateSlider( e ) {
    var data   = this.getData(),
        slider = data.slider,
        value  = parseInt( this.get( &quot;value&quot; ), 10 );

    if ( data.wait ) {
        data.wait.cancel();
    }

    &#x2F;&#x2F; Update the Slider on a delay to allow time for typing
    data.wait = Y.later( 200, slider, function () {
        data.wait = null;
        this.set( &quot;value&quot;, value );
    } );
}

&#x2F;&#x2F; Function to update the input value from the Slider value
function updateInput( e ) {
    this.set( &quot;value&quot;, e.newVal );
}



&#x2F;&#x2F; Create a horizontal Slider using all defaults
xSlider = new Y.Slider();

&#x2F;&#x2F; Link the input value to the Slider
xInput = Y.one( &quot;#horiz_value&quot; );
xInput.setData( { slider: xSlider } );

&#x2F;&#x2F; Pass the input as the third arg to be &#x27;this&#x27; inside updateInput
xSlider.after( &quot;valueChange&quot;, updateInput, xInput );
xInput.on( &quot;keyup&quot;, updateSlider );

&#x2F;&#x2F; Render the Slider next to the input
xSlider.render(&#x27;.horiz_slider&#x27;)


&#x2F;&#x2F; Create the vertical Slider.
yInput = Y.one( &quot;#vert_value&quot; );
yInput.setData( &quot;slider&quot;, new Y.Slider({
            axis: &#x27;y&#x27;,
            min   : 100,      &#x2F;&#x2F; min is the value at the top
            max   : -100,     &#x2F;&#x2F; max is the value at the bottom
            value : 30,       &#x2F;&#x2F; initial value
            length: &#x27;201px&#x27;,  &#x2F;&#x2F; rail extended to afford all values

            &#x2F;&#x2F; construction-time event subscription
            after : {
                valueChange: Y.bind( updateInput, yInput )
            }
        }).render( &quot;.vert_slider&quot; ) &#x2F;&#x2F; render returns the Slider
    )                               &#x2F;&#x2F; set( &quot;data&quot;, ... ) returns the Node
    .on( &quot;keyup&quot;, updateSlider );   &#x2F;&#x2F; chain the keyup subscription

});</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="The basics of setting up a horizontal and vertical Slider">
                                        <a href="slider-basic.html">Basic Sliders</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a vertical Slider from existing markup">
                                        <a href="slider-from-markup.html">Creating a Slider from Existing Markup</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Specifying an alternate skin for a Slider instance">
                                        <a href="slider-skin.html">Alternate Skins</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to use Overlay&#x27;s constrainment support, to limit the XY value which can be set for an Overlay.">
                                        <a href="../overlay/overlay-constrain.html">Constrain Support</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
